<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- vim:expandtab=on
  -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Unit test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../../lib/prototype.js" type="text/javascript"></script>
  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
  <script src="../../src/unittest.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../test.css" type="text/css" />
  <style>
    .selected { background-color: #888; }
  </style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
  Tests for Ajax.Autocompleter in controls.js.
</p>

<!-- Log output -->
<div id="testlog"> </div>

<input id="ac_input" type="text" autocomplete="off" />
<div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>

<input id="ac_input_br" type="text" autocomplete="off" />
<div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>

<input id="ac2_input" type="text" autocomplete="off" />
<div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>

<input id="actoken_input" type="text" autocomplete="off" />
<div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>

<input id="dummy_element" type="text" autocomplete="off" />

<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

  
  new Test.Unit.Runner({
    
    // Integration test, tests the entire cycle
    testAjaxAutocompleter: function() { with(this) {
      var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
        { method: 'get' }); //override so we can use a static for the result
      assertInstanceOf(Ajax.Autocompleter, ac);
      
      // box not visible
      assertNotVisible('ac_update');
      
      // focus, but box not visible
      Event.simulateMouse('ac_input', 'click');
      assertNotVisible('ac_update');
      
      Event.simulateKeys('ac_input','abcdefg');
      assertEqual('abcdefg', $('ac_input').value);
      
      // check box popping up on input
      wait(1000, function() { with(this) {
        assertVisible('ac_update');
        assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
        assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
        
        // intl. characters return (UTF-8)
        assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
                
        // first entry should be selected
        assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
        
        Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
        
        // second entry should be selected
        assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
        assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
        
        // check selecting with <TAB>
        Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
        assertEqual('test2',$('ac_input').value);
        
        // check box going away
        wait(500, function() { with(this) {
          assertNotVisible('ac_update');
          
          // check selecting with mouse click
          Event.simulateKeys('ac_input','3');
          assertEqual('test23', $('ac_input').value);
          wait(1000, function() { with(this) {
            assertVisible('ac_update');
            Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
                    
            wait(1000, function() { with(this) {
              // tests if removal of 'informal' nodes and HTML escaping works
              assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
              assertNotVisible('ac_update');
              
                // check cancelling with <ESC>
                Event.simulateKeys('ac_input','abcdefg');
                
                wait(1000, function() { with(this) {
                  assertVisible('ac_update');
                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
                  
                  Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
                  Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});

                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
                }});
            }});
          }});
        }});
      }});
    }},
    
    testAfterUpdateElement: function() { with(this) {
      var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
        { method: 'get',
          afterUpdateElement: function(element,selectedElement) { 
            element.value = 'afterupdate:' + selectedElement.tagName; 
          }
         });
      assertInstanceOf(Ajax.Autocompleter, ac);
      
      Event.simulateMouse('ac2_input', 'click');
      Event.simulateKeys('ac2_input','abcdefg');
      
      wait(1000, function() { with(this) {
        assertVisible('ac2_update');
        Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
        
        assertEqual('afterupdate:LI',$('ac2_input').value);
      }});
    }},
    
    testTokenizing: function() { with(this) {
      var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
        { tokens:',', method: 'get' });
      assertInstanceOf(Ajax.Autocompleter, actoken);
      
      Event.simulateKeys('actoken_input','abc');
      
      wait(1000, function() { with(this) {
        Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
        assertEqual('test1',$('actoken_input').value);
        Event.simulateKeys('actoken_input',',abc');
        wait(1000, function() { with(this) {
          Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
          Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
          assertEqual('test1,test2',$('actoken_input').value);
          // Simulating KEY_LEFT's prior to a 'b' doesn't work!  So slightly ugly here...
          $('actoken_input').value = 'test1b,test2';
          actoken.onObserverEvent(); 
          wait(1000, function() { with(this) {
            for (var index = 0; index < 2; ++index)
              Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
            Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
            assertEqual('test3,test2', $('actoken_input').value);
          }});
        }});
      }});
    }},
    
    // Same integration test, results has no linebreaks
    testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
      var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
        { method: 'get' }); //override so we can use a static for the result
      assertInstanceOf(Ajax.Autocompleter, ac);

      // box not visible
      assertNotVisible('ac_update_br');

      // focus, but box not visible
      Event.simulateMouse('ac_input_br', 'click');
      assertNotVisible('ac_update_br');

      Event.simulateKeys('ac_input_br','abcdefg');
      assertEqual('abcdefg', $('ac_input_br').value);

      // check box popping up on input
      wait(1000, function() { with(this) {
        assertVisible('ac_update_br');
        assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
        assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);

        // intl. characters return (UTF-8)
        assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);

        // first entry should be selected
        assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');

        Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});

        // second entry should be selected
        assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
        assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');

        // check selecting with <TAB>
        Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
        assertEqual('test2',$('ac_input_br').value);

        // check box going away
        wait(500, function() { with(this) {
          assertNotVisible('ac_update_br');

          // check selecting with mouse click
          Event.simulateKeys('ac_input_br','3');
          assertEqual('test23', $('ac_input_br').value);
          wait(1000, function() { with(this) {
            assertVisible('ac_update_br');
            Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');

            wait(1000, function() { with(this) {
              // tests if removal of 'informal' nodes and HTML escaping works
              assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
              assertNotVisible('ac_update_br');

                // check cancelling with <ESC>
                Event.simulateKeys('ac_input_br','abcdefg');

                wait(1000, function() { with(this) {
                  assertVisible('ac_update_br');
                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);

                  Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
                  Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});

                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
                }});
            }});
          }});
        }});
      }});
    }}

  });
// ]]>
</script>
</body>
</html>
